<template>
	<view style="display: flex;flex-direction: column;">
	<view class="search">
		<div class="search-btn" @click="toSearch">
			<icon class="search-icon" type="search" size="12"/>
			<span>搜索商品</span>
		</div>
	</view>
	<view class="classify-body">
		<view class="classify-left">
			<view class="nav-item" v-for="(item,index) in navList" :key="index" :class="{'active':current==item.id}" @click="navChange(item.id)">{{item.name}}</view>
		</view>
		<view class="classify-right">
<!--			<view class="title-icon">-->
<!--				<image mode="widthFix" src="http://i1.sleeve.7yue.pro/39a8c403-ccd4-4835-96c8-a1efe3224758.png"></image>-->
<!--			</view>-->
			<view class="card-section">
				<!-- <view class="title">
					<view class="title-left">
						<h1>中药材</h1>
						<image mode="widthFix" style="width: 80px;" src="../../static/goodClassify/title_bottom.png"></image>
					</view>
					<view>更多</view>
				</view> -->
				<view class="classify-list">
					<view class="classify-item" v-for="(item2,index) in classifyList" :key="index">
						<image mode="widthFix" style="width: 57px;height: 57px;" :src="item2.img_url" @click="toClassifyTwo(item2.id)"></image>
						<text>{{item2.name}}</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- <u-row>
			<u-col span="3">
				<scroll-view scroll-y="true" style="height: 100vh;" show-scrollbar="false">
					<view class="classify-left" v-for="(sort,index) in medicineSort" :key="index" @click="clickSortName(sort,index)">
						<view class="left-nav-name"  :class="{'active':current==index}" >
							{{sort.name}}
						</view>	
					</view>
				</scroll-view>
			</u-col>
			<u-col span="8" >
				<scroll-view scroll-y="true" style="height: 100vh;">
					<view class="classify-right">
						<view  style="display: flex;flex-wrap:wrap;">
							<view v-for="(item,index) in medicineSortAll[0].detail" :key="index" style="flex: 1;display: flex;flex-direction: column;align-items: center;">
								<image style="width: 130rpx;height: 124rpx;" :src="item.pic"></image>
								<view style="width: 130rpx;font-size: 28rpx; color: #999999;text-align: center;">{{item.detailName}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</u-col>
		</u-row> -->
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				navList: [],
				classifyList:[],
				selectSectionId:0
			}
		},
		onLoad(){

		},
		mounted(){

		},
		onShareAppMessage() {
			return {
				title: '百越网购商城',
				desc: this.goodsDetail.name,
				path:'/pages/classify/classify'
			}
		},
		onShow(){
			var section_id=uni.getStorageSync('section_id')
			if(section_id && section_id != ""){
				this.selectSectionId = section_id
			}
			uni.removeStorageSync('section_id');
			this.getBuyingClassifyList();
		},
		methods: {
			toSearch(){
				wx.navigateTo({url: '/pages/search/search'});
			},
			toClassifyTwo(id){
				uni.navigateTo({
					url: '/pages/classifyTwo/classifyTwo?section_id='+this.current + "&classify_id="+id
				})
			},
			//获取分类
			async getBuyingClassifyList() {
				let param={section_id:this.selectSectionId}
				let res = await this.$api.getSectionClassifyList(param);
				if(res.data.level == "success"){
					this.navList = res.data.data.sections;
					this.classifyList = res.data.data.classifys;
					this.current = res.data.data.section_id;
				}else {
					uni.showToast({title:res.data.message,icon:"none"})
				}
			},
			async navChange(index) {
				let param={section_id:index}
				let res = await this.$api.getSectionClassifyList(param);
				if(res.data.level == "success"){
					this.classifyList = res.data.data.classifys;
					this.current = res.data.data.section_id;
				}else {
					uni.showToast({title:res.data.message,icon:"none"})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../common/css/mixin.scss";
	.search {
		width: calc(100vw - 40rpx);
		height: 70rpx;
		padding: 20rpx;
		.search-btn {
			width: calc(100% - 60px);
			/*position: relative;*/
			padding: 0 60rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 360rpx;
			/*text-align: center;*/
			border: 1rpx solid #eeeeee;
			font-size: 24rpx;
			@include flex();
			flex-direction: row;
			color: #858585;
			background: #ffffff;
			.search-icon {
				/*position: absolute;*/
				/*top: 15rpx;*/
				/*left: 25rpx;*/
				@include flex();
				margin-right: 20rpx;
			}
		}
	}
	.classify-body{
	    width: 100vw;
		max-height: 100vh;
		font-size: 14px;
	    @include flex(flex-start,flex-start);
	    flex-direction: row;

	    .classify-left{
	      width: 25vw;
	      color: #737277;
		  background-color: #f7f6fb;
		  height: 100vh;
		  overflow: auto;
	      .nav-item{
	        width: calc(100% - 3px);
	        text-align: center;
	        height: 120rpx;
	        line-height: 120rpx;
	        margin-left: 3px;
	      }
	      .active{
			color: #000000;
			font-weight: bold;
	        border-left: 5px solid #f64949;
	        margin-left: 0px;
			background-color: #FFFFFF;
	      }
	    }
	    .classify-right{
	      width: 75vw;
	      background: #ffffff;
		  max-height: 100vh;
		  overflow: auto;
		  .title-icon{
			  padding: 20px 20px 0;
			  display: flex;
			  justify-content: center;
			  image{
				  width: 100%;
				  border-radius: 10px;
			  }
		  }
		  .card-section{
			width: calc(100% - 60px);
			padding: 10px 30px;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				/* padding: 0 5px; */
				.title-left{
					font-size: 16px;
					font-weight: bold;
					display: flex;
					flex-direction: column;
					text-align: center;
				}
			}
			.classify-list{
				padding-top: 25px;
				display: flex;
				flex-wrap: wrap;
				.classify-item{
					width: calc(100%/3);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 20px;
					text{
						margin-top: 8px;
					}
				}
			}
		  }
	    }
	}
	/* .classify-body{
		text-align: center;
		
		.classify-left{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			padding: 0rpx 20rpx 20rpx 0;
			color: #808080;
			margin-left: -10rpx;
			margin-top: 20rpx;
		}
		.classify-right{
			margin-top: 20rpx;
		}
	}
	.left-nav-name{
		font-size: 14px;
		color: #9F9F9F;
	}
	.active{
		border-left: 18rpx solid #4CD964;
		color: black;
		font-weight: bold;
	} */
	/* 隐藏滚动条 */
	/deep/.uni-scroll-view ::-webkit-scrollbar {
	 /* 隐藏滚动条，但依旧具备可以滚动的功能 */
	 display: none;
	 width: 0;
	 height: 0;
	 color: transparent;
	 background: transparent;
	}
	/deep/::-webkit-scrollbar {
	 display: none;
	 width: 0;
	 height: 0;
	 color: transparent;
	 background: transparent;
	}
</style>
